<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热词</title>
	<script src="../components/echarts-4.0.4.min.js"></script>
	<script type="text/javascript" src="../components/jquery1.42.min.js"></script>
	<script type="text/javascript" src="../components/jquery.SuperSlide.2.1.1.js"></script>
	<style>
		body,html{
			padding: 0;
			margin: 0;
			background:#0A0F23;
			width: 100%;
			height: 100%;
		}
		/* 本例子css */
		.txtScroll-top{ width:100%;  overflow:hidden; position:relative;margin: 0 auto;}
		.txtScroll-top .hd{ overflow:hidden;  height:100%;  color: #fff;}
		.txtScroll-top .hd ul{ /*float:right;*/ overflow:hidden; zoom:1; }
		.txtScroll-top .hd ul li{ /*float:left;  */width:9px; height:9px; overflow:hidden;/* margin-right:5px; */text-indent:-999px; cursor:pointer;list-style: none; }
		.txtScroll-top .hd ul li.on{ background-position:0 0;}
		.txtScroll-top .infoList li{ height:36px; line-height:36px; color:#fff; list-style: none;}
		.txtScroll-top .hd .title{
			font-size: 22px;
			text-align: center;
			padding: 10px;
			margin: 0 0 8px 0;
			font-weight: 700;
		}
		.txtScroll-top .infoList li span{
			display: inline-block;
			height: 36px;
			font-size: 16px;
			text-align: center;
			vertical-align: top;
		}
		.hd .head span{
			display: inline-block;
			font-size: 16px;
			height: 44px;
			vertical-align: sub;
			text-align: center;
		}

		.txtScroll-top .infoList li span:nth-of-type(1),.hd .head span:nth-of-type(1){
			width: 15%;
		}
		.txtScroll-top .infoList li span:nth-of-type(2),.hd .head span:nth-of-type(2){
			width: 55%;
		}
		.txtScroll-top .infoList li span:nth-of-type(3),.hd .head span:nth-of-type(3){
			width: 25%;
			text-align: center;
		}
		.txtScroll-top .infoList li span:nth-of-type(2){
			overflow: hidden;
	        white-space: nowrap;
	        text-overflow: ellipsis;
	        text-align: left;
		}
	</style>
</head>
<body>
	<div style="width: 94%;height: 100%;">
		<div class="txtScroll-top">
			<div class="hd">
				<div class="title">2017年我国发明专利授权量排名前十的企业</div>
				<div class="head">
					<span>排名</span>
					<span>企业</span>
					<span>发明专利授权量(件)</span>
				</div>
			</div>
			<div class="bd">
				<ul class="infoList">
					<li><span>1.</span><span>国家电网公司</span><span>3622</span></li>
					<li><span>2.</span><span>华为技术有限公司</span><span>3293</span></li>
					<li><span>3.</span><span>中国石油化工股份有限公司</span><span>2567</span></li>
					<li><span>4.</span><span>京东方科际集团股份有限公司</span><span>1845</span></li>
					<li><span>5.</span><span>中兴通讯股份有限公司</span><span>1699</span></li>
					<li><span>6.</span><span>联想（北京）有限公司</span><span>1454</span></li>
					<li><span>7.</span><span>珠海格力电器股份有限公司</span><span>1273</span></li>
					<li><span>8.</span><span>广东欧珀移动通信有限公司</span><span>1222</span></li>
					<li><span>9.</span><span>中国石油天然气股份有限公司</span><span>1008</span></li>
					<li><span>10.</span><span>中芯国际集成电路制造（上海）有限公司</span><span>862</span></li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script>
	jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"topMarquee",autoPlay:true,vis:5,mouseOverStop:false,interTime:200});

</script>
</html>